<template>
	<view>
		<view class="content">
			<input-search class="input-search" placeholder="Report Name" :style="{'top':top+'px'}" @click="getValue"></input-search>
			<view class="file-item" v-for="(item,index) in fileList " :key="index" @click="getItem(item)">
				<view class="file-ico">
					<image :src="item.url"></image>
				</view>
				<view class="file-name">
					{{item.title}}
				</view>
				<view class="file-folder-ico">
					<image lazy-load mode="aspectFill" src="../../static/und.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import inputSearch from '@/components/input-search/input-search.vue'
	export default {
		components: {
			inputSearch
		},
		data() {
			return {
				top: null,
				fileList: [{
					url: "../../static/reports1.png",
					title: "Industry Pricing Index"
				}, {
					url: "../../static/reports2.jpg",
					title: "Competitor Sales Report"
				}, {
					url: "../../static/reports1.png",
					title: "Industry Pricing Index"
				}, {
					url: "../../static/reports2.jpg",
					title: "Competitor Sales Report"
				}, {
					url: "../../static/reports1.png",
					title: "Industry Pricing Index"
				}, {
					url: "../../static/reports2.jpg",
					title: "Competitor Sales Report"
				}, {
					url: "../../static/reports1.png",
					title: "Industry Pricing Index"
				}, {
					url: "../../static/reports2.jpg",
					title: "Competitor Sales Report"
				}, {
					url: "../../static/reports1.png",
					title: "Industry Pricing Index"
				}, {
					url: "../../static/reports2.jpg",
					title: "Competitor Sales Report"
				}, {
					url: "../../static/reports1.png",
					title: "Industry Pricing Index"
				}, {
					url: "../../static/reports2.jpg",
					title: "Competitor Sales Report"
				}, {
					url: "../../static/reports1.png",
					title: "Industry Pricing Index"
				}, {
					url: "../../static/reports2.jpg",
					title: "Competitor Sales Report"
				}, {
					url: "../../static/reports1.png",
					title: "Industry Pricing Index"
				}, {
					url: "../../static/reports2.jpg",
					title: "Competitor Sales Report"
				}, {
					url: "../../static/reports1.png",
					title: "Industry Pricing Index"
				}, {
					url: "../../static/reports2.jpg",
					title: "Competitor Sales Report"
				}, {
					url: "../../static/reports1.png",
					title: "Industry Pricing Index"
				}, {
					url: "../../static/reports2.jpg",
					title: "Competitor Sales Report"
				}]
			};
		},
		onLoad() {
			const res = uni.getSystemInfoSync();
			this.top = res.windowTop;
		},
		onNavigationBarButtonTap(e) {
			if (e.text === "Back") {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		methods: {
			getValue(value) {
				if (value) {
					uni.showToast({
						icon: "none",
						title: value,
						duration: 2000
					});
				}
			},
			getItem(item) {
				uni.navigateTo({
					url: `../web-view/wev-view?type=url&url=https://www.baidu.com/`
				});
			}
		}
	}
</script>

<style lang="less">
	.content {
		.input-search {
			position: sticky;
			top: 0px;
			z-index: 9999;
		}

		.file-item {
			border-bottom: 1px solid #CCCCCC;
			padding: 12px 0 12px 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.file-ico {
				width: 180rpx;
				height: 100rpx;
				margin-left: 15px;
				background: #09BB07;

				image {
					width: 180rpx;
					height: 100rpx;
				}
			}

			.file-name {
				width: 70%;
				flex: 1;
				margin-left: 10px;
				display: flex;
				flex-direction: column;
				word-wrap: break-word;
				word-break: normal;
				font-size: 16px;
				font-weight: 400;
			}

			.file-folder-ico {
				width: 26px;
				margin-right: 10px;

				image {
					width: 26px;
					height: 21px;
				}
			}
		}
	}
</style>
